<template>
  <!-- 在这里对菜单进行渲染 -->
  <!-- 对数据进行循环 来进行判断  先判断是否为最上层 ，然后依次判断时否有二级路由，如果有再进行判断 -->
  <template v-for="item in menu">

    <el-menu-item
      :index="item.path"
      v-if=" item.children.length == 0"
      :key="item.path"
      @click="open(item)"
    >
      <template #title>
        <span>{{ item.label }}</span>
      </template>
    </el-menu-item>
    <el-sub-menu
      v-else-if="item.children.length > 0"
      :index="item.path"
      :key="item.id"
      
    >
      <template #title>
        <span>{{ item.label }}</span>
      </template>
      <template v-for="child in item.children" :key="child.id">
        <el-menu-item v-if="child.children.length == 0"  :index="child.path" @click="open(child)">
          <span>{{ child.label }}</span>
        </el-menu-item>
        <TreeVue v-else :menu="[child]"></TreeVue>
      </template>
    </el-sub-menu>
  </template>
</template>

<script setup lang="ts">
import { Menu as IconMenu, Message, Setting } from "@element-plus/icons-vue";
import { computed } from "vue";
import { useRouter } from "vue-router";
// pinia
import { useStore } from "../../store/index";
import { storeToRefs } from 'pinia';
const store = useStore();
let {editableTabs,count,editableTabsValue}=storeToRefs(store)
// console.log(editableTabs.value,count.value,'editableTabs');

const router=useRouter()
type props = {
  menu: any;
};
// 在这里因为懒得搞ts 的声名变量 后面补充 同时 也要对 获取的参数进行匹对
// 父组件传递的参数可以添加一个默认值  withDefaults 方法 接受两个参数，一个值，一个默认值
const props = withDefaults(defineProps<props>(), {});
// console.log(props.menu,'msg');

const open = (item: any) => {
  console.log(item,'点击事件');
  // return
  router.push({
    path:item.path
  })
  editableTabsValue.value=item.path
  editableTabs.value.push({
    title:item.name,
    name:item.path,
    path:item.path
  })
  localStorage.setItem('editableTabs',JSON.stringify(editableTabs.value))
  localStorage.setItem('editableTabsValue',JSON.stringify(editableTabsValue.value))
};

</script>
<script lang="ts">
export default {
  name: "TreeVue",
};
</script>
<style scoped>
</style>